<template>
  <div style="margin-left: 50px; margin-right: 50px">

    <!-- 基本数据 -->
    <a-card title="基本数据" :bordered="false">
      <div>
        <!-- 钻井基础数据 -->
        <div>
          <a-descriptions title="井基础数据表" bordered :column="4" size="middle" :label-style="{ width: '160px' }">
            <a-descriptions-item label="地理位置" :span="4">{{ form?.wellLocation || "---" }}</a-descriptions-item>
            <a-descriptions-item label="构造位置" :span="4">{{ form?.wellConstruct || "---" }}</a-descriptions-item>
            <a-descriptions-item label="开钻日期" :span="2">{{ form?.drillingDate || "---" }}</a-descriptions-item>
            <a-descriptions-item label="完钻日期" :span="2">{{ form?.completionDate || "---" }}</a-descriptions-item>
            <a-descriptions-item label="井号" :span="2">{{ form?.wellId || "---" }}</a-descriptions-item>
            <a-descriptions-item label="钻井队号" :span="2">{{ form?.teamNumber || "---" }}</a-descriptions-item>
            <a-descriptions-item label="井别" :span="1">{{ form?.wellCategory || "---" }}</a-descriptions-item>
            <a-descriptions-item label="井型" :span="1">{{ form?.wellType || "---" }}</a-descriptions-item>
            <a-descriptions-item label="井深" :span="2"> </a-descriptions-item>
            <a-descriptions-item label="钻井液类型">{{ form?.fluidType || "---" }}</a-descriptions-item>
            <a-descriptions-item label="钻井液密度">{{ form?.fluidDensity || "---" }}</a-descriptions-item>
            <a-descriptions-item label="钻井液粘度" :span="2">{{ form?.viscosity || "---" }}</a-descriptions-item>
            <a-descriptions-item label="钻井设备" :span="2">{{ form?.drillingEquipment || "---" }}</a-descriptions-item>
            <a-descriptions-item label="钻具扣型" :span="2">{{ form?.drillToolType || "---" }}</a-descriptions-item>
            <a-descriptions-item label="钻头程序(mm×m)" :span="4">
              <a-descriptions-item v-for="(drillItem, index) in form.drillList" :key="index">
                <p>钻头名称: {{ drillItem?.name || "---" }}</p>
                <p>外径: {{ drillItem?.outerDiameter || "---" }}</p>
                <p>深度: {{ drillItem?.deep || "---" }}</p>
              </a-descriptions-item>
            </a-descriptions-item>
            <a-descriptions-item label="套管程序(mm×m)" :span="4">
              <a-descriptions-item v-for="(casingItem, index) in form.casingList" :key="index">
                <p>钻头名称: {{ casingItem?.name || "---" }}</p>
                <p>外径: {{ casingItem?.outerDiameter || "---" }}</p>
                <p>深度: {{ casingItem?.deep || "---" }}</p>
              </a-descriptions-item>
            </a-descriptions-item>
          </a-descriptions>
        </div>
        <!-- 井身结构数据 -->
        <div style="margin-top: 30px">
          <a-descriptions title="井身结构" bordered :column="6" size="middle" :label-style="{ width: '190px' }">
            <a-descriptions-item label="造斜点深(m)" :span="2">{{ form?.obliquePointDeep }}</a-descriptions-item>
            <a-descriptions-item label="最大井斜（°）/深度" :span="2">{{ form?.maxDeviation }}</a-descriptions-item>
            <a-descriptions-item label="卡点测深(m)" :span="2"> </a-descriptions-item>
            <a-descriptions-item label="卡点井斜 (deg)" :span="2"> </a-descriptions-item>
            <a-descriptions-item label="卡点方位(deg)" :span="2"> </a-descriptions-item>
            <a-descriptions-item label="卡点狗腿度 (deg/30m)" :span="2"> </a-descriptions-item>
          </a-descriptions>
        </div>
        <!-- 井身结构图 -->
        <div style="margin-top: 30px;">
          <EchartCanvas ref="lithologyRef" :echartsData="schemesData"></EchartCanvas>
        </div>
      </div>
    </a-card><br>
    <!-- 测井前期施工情况 -->
    <a-card title="测井前期施工情况" :bordered="false">
      <div>
        <!-- 测井数据 -->
        <div style="margin-top: 30px">
          <a-descriptions title="测井数据" bordered size="middle" :column="4" :label-style="{ width: '170px' }">
            <a-descriptions-item label="测井小队" :span="2">{{ form?.constructionTeam || "---" }}</a-descriptions-item>
            <a-descriptions-item label="仪器类别" :span="2">{{ form?.instrumentType || "---" }}</a-descriptions-item>
            <a-descriptions-item label="仪器最大外径(mm)" :span="2">{{ form?.maxOuterDiameter || "---" }}</a-descriptions-item>
            <a-descriptions-item label="仪器弱点位置" :span="2">{{ form?.instrumentWeaknesses || "---" }}</a-descriptions-item>
            <a-descriptions-item label="仪器长度" :span="2">{{ form?.instrumentLength || "---" }}</a-descriptions-item>
            <a-descriptions-item label="抓捞仪器位置" :span="2"> </a-descriptions-item>
            <a-descriptions-item label="电缆型号" :span="2">{{ form?.cableModel || "---" }}</a-descriptions-item>
            <a-descriptions-item label="电缆投产日期" :span="2">{{ form?.putDate || "---" }}</a-descriptions-item>
            <a-descriptions-item label="弱点设置（t）" :span="2"> </a-descriptions-item>
            <a-descriptions-item label="电缆接头" :span="2">{{ form?.cableGlands || "---" }}</a-descriptions-item>
            <a-descriptions-item label="拉断力" :span="2">{{ form?.breakingForce || "---" }}</a-descriptions-item>
            <a-descriptions-item label="拉力测试日期" :span="2">{{ form?.tensileTestDate || "---" }}</a-descriptions-item>
          </a-descriptions>
        </div>
        <!-- 井落鱼结构表 -->
        <div style="margin-top: 30px">
          <h6>井落鱼结构表</h6>
          <a-table :columns="toolColumns" :data-source="form.wellfallFishList">
            <template #bodyCell="{ column, text }"> </template>
          </a-table>
          <br />
        </div>
        <!-- 井下仪器状态分析 -->
        <div>
          <h6>井下仪器状态分析</h6>
          （1）测井队校深后，仪器底部深度米，仪器顶部位置在 米；<br />
          （2）初步判断遇卡原因为井径不规则卡，鱼头可能嵌入键槽或台阶处；<br />
          （3）仪器串最小承拉载荷 ，最小抗压缩力 ；<br />
          （4）仪器串共安装扶正器 个，分别在 ，最上部扶正器不影响打捞； <br />
          （5）仪器已断电，仪器腿已收回。<br />
        </div>
      </div>
    </a-card><br>
    <!-- 施工场地准备 -->
    <a-card title="施工场地准备" :bordered="false">
      <div>
        <!-- 作业设备 -->
        <div style="margin-top: 30px">
          <h6>作业设备表</h6>
          <a-table :columns="workColumns" :data-source="data">
            <template #bodyCell="{ column, text }"> </template>
          </a-table>
          <br />
        </div>
        <!-- 打捞工具准备 -->
        <div style="margin-top: 30px">
          <h6>打捞工具准备</h6>
          <a-table :columns="toolReadyColumns" :data-source="data">
            <template #bodyCell="{ column, text }"> </template>
          </a-table>
          <br />
        </div>
      </div>
    </a-card>
  </div>
</template>
<script setup>
import EchartCanvas from "../echarts.vue";
import { getDataOne } from "@/api/salvage/planDesign.js";
const props = defineProps({
  reportId: {
    type: String,
  },
});
const form = ref({});
const schemesData = ref(undefined);
const toolColumns = ref([
  {
    title: "仪器类型",
    dataIndex: "instrumentType",
    key: "instrumentType",
  },
  {
    title: "长度（m）",
    dataIndex: "length",
    key: "length",
  },
  {
    title: "外径（mm）",
    dataIndex: "outsideDiameter",
    key: "outsideDiameter",
  },
  {
    title: "耐温 小时（℃）(h)",
    dataIndex: "temperatureResistanters",
    key: "temperatureResistanters",
  },
  {
    title: "耐压(Mpa)",
    dataIndex: "pressureResistant",
    key: "pressureResistant",
  },
  {
    title: "质量（kg）",
    dataIndex: "quality",
    key: "quality",
  },
  {
    title: "抗拉伸力（lbf）",
    dataIndex: "tensileResistance",
    key: "tensileResistance",
  },
  {
    title: "抗压缩力（lbf）",
    dataIndex: "antiCompression",
    key: "antiCompression",
  },
]);
const workColumns = ref([{
  title: "类别",
  dataIndex: "name",
  key: "name",
},
{
  title: "配套装备名称",
  dataIndex: "name",
  key: "name",
},
{
  title: "数量",
  dataIndex: "name",
  key: "name",
},
{
  title: "规格型号",
  dataIndex: "name",
  key: "name",
},
{
  title: "提供单位",
  dataIndex: "name",
  key: "name",
}])
const toolReadyColumns = ref([{
  title: "类别",
  dataIndex: "name",
  key: "name",
},
{
  title: "名称",
  dataIndex: "name",
  key: "name",
},
{
  title: "数量",
  dataIndex: "name",
  key: "name",
},
{
  title: "技术尺寸",
  dataIndex: "name",
  key: "name",
},
{
  title: "提供单位",
  dataIndex: "name",
  key: "name",
}])
// 监听数据变化
watch(
  () => props.reportId,
  () => {
    console.log("props.reportId", props.reportId);
    getSolution();
  }
);

// 获取施工方案信息
function getSolution() {
  getDataOne(props.reportId).then((res) => {
    console.log('getSolution', res);
    form.value = res;
  });
}
getSolution();
</script>
